<template>
	<view>
		<view v-for="(item,index) in list" :key="index">
			<u-cell-group>
		    <u-cell
					size="large"
					:title="item.dayTime"
					:label="item.time"
					class="cell"
	      >
				  <view
    	      slot="value"
    	      class="u-slot-value"
    	    >
					  <button class="closeBtn" @click="close(index)">关闭</button>
				  </view>
				</u-cell>
	    </u-cell-group>
		</view>
    <button class="addBtn" @click="addTime">
			<u-icon name="plus" color="#2979ff" size="58"></u-icon>
			<text class="fontText">添加</text>
		</button>
			<view>
        <u-datetime-picker
					:show="show"
					v-model="val"
					mode="datetime"
					@cancel="addTime"
					@confirm="confirm"
        ></u-datetime-picker>
    </view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.list.sort((a,b) => new Date(a.dayTime + 'T' + a.time + 'Z') - new Date(b.dayTime + 'T' + b.time + 'Z'));
		},
		data() {
			return {
				//原有的时间
				list: [
					{dayTime: '2022-04-27', time: '09:20:04'},
					{dayTime: '2022-04-26', time: '23:21:34'},
					{dayTime: '2022-04-26', time: '12:19:34'}
				],
				//传给后台时间对象
				detailTime: {
					year: undefined,
					month: undefined,
					day:  undefined,
					hour: undefined,
					minute: undefined,
					second: undefined,
				},
				//时间选择器显示与否
				show: false,
				//时间间选择器默认绑定现在的时间
				val: Number(new Date()),
			}
		},
		methods: {
			addTime(){
				this.show = !this.show;
			},
			confirm(data){
				console.log(data);
				let time = new Date(data.value);
				console.log(time);
				this.detailTime.year = time.getFullYear();
				this.detailTime.month = (time.getMonth() + 1) >= 1 && (time.getMonth() + 1) <= 9 ? ("0" + (time.getMonth() + 1)) : (time.getMonth() + 1);
				this.detailTime.day = time.getDate() >= 0 && time.getDate() <= 9 ? ("0" + time.getDate()) : time.getDate();
				this.detailTime.hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
				this.detailTime.minute = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
				this.detailTime.second = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
				console.log(this.detailTime);
				//时间选择器选择的时间封装成需要的对象以便传给this.list
				let timeList = {};
				timeList.dayTime = this.detailTime.year + '-' + this.detailTime.month + '-' + this.detailTime.day;
				timeList.time = this.detailTime.hour + ':' + this.detailTime.minute + ':' + this.detailTime.second;
				this.list.push(timeList);
				this.addTime();
				this.renew();
				uni.requestSubscribeMessage({
  tmplIds: ['1tnsdoEN6aMMEYRMUDUuiZTc2bJSRKY8hhH6Y19mn2M'],
  success (res) { console.log(res);}
})
			},
			renew() {
				this.list.sort((a,b) => new Date(a.dayTime + 'T' + a.time + 'Z') - new Date(b.dayTime + 'T' + b.time + 'Z'));
				// uni.requestSubscribeMessage({
				// 	tmplIds: ['accept'],
				// 	success (res) {console.log(res);}
				// })
			},
			close(index){
				console.log(index);
				this.list.splice(index,1);
			}
		}
	}
</script>

<style scoped>
.closeBtn {
	color:#777;
	height: 75rpx;
	line-height: 75rpx;
  padding: 0rpx 20rpx;
	text-align: center;
	font-size: 35rpx;
}
.fontText {
	color: blue;
	font-size: 40rpx;
	margin-left: 5px;
}
.addBtn {
	margin-top: 30rpx;
	width: 34%;
	height: 130rpx;
	text-align: center;
	line-height: 130rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
